'use strict';

define(function(require,exports,module){
	
	var React = require('react');
	var $ = require('jquery');
	var publicObj = require('lib/public');
    var token = publicObj.get_token();

	var XDate = require('xdate');
	var moment = require('moment');
		
	/*调用ApiColumnDiagram组件*/
	var DayRegisterColumnDiagram = require('components/diagram/ApiColumnDiagram');

    //RegisterAreaBasic
    var RegisterAreaBasic = require('components/diagram/AreaDiagram/RegisterAreaBasic');

	/*DATE下拉框*/
	var SelectOptionDate = require('components/partial/SelectOptionDate');
	
	/*下拉框*/
	var SelectOption = require('components/partial/SelectOption');

    //TimeBucket
    var DayRegisterTimeBucket = require('./DayRegisterDiagram/TimeBucket');
    /*Loading状态*/
    var ReactLoading = require('../partial/ReactLoading');
	
	module.exports = React.createClass({displayName: "exports",
		handleDateChange:function(event){
			var date = event.target.value;
			this.setState({'date':date});
			this.loadDiagramData(date);
		},
		loadDiagramData:function(date){
			var token = publicObj.get_token();
			this.setState({'data':[]});
			if(date){

				var year = date.substring(0,4);
				var month = date.substring(4,6);
				var day = date.substring(6,8);
				var start_date = Math.round(new XDate(new XDate(year+"-"+month+"-"+day+" 00:00:00").toString('yyyy-MM-dd')+' 00:00:00').getTime() / 1000);
				var end_date = Math.round(new XDate(new XDate(year+"-"+month+"-"+day+" 00:00:00").addDays(1).toString('yyyy-MM-dd')+' 00:00:00').getTime() / 1000);
				
				var sql = "SELECT FROM_UNIXTIME(ctime,'%H') as time,count(*) as value FROM qeeniao.user where ctime >= "+start_date+" and ctime < "+end_date+" group by time order by time ASC";
			
				$.ajax({
					url:this.props.url,
					data:{sql:sql,'access_token':token},
					type:'post',
					dataType:'json',
					success:function(o){
						var tmp = [];
						tmp.push(o);
						if(o){
							if(this.isMounted()) {
								this.setState({'data': tmp});
							}
						}

					}.bind(this),
					error:function(xhr,status,err){
						console.error(sql,status,err.toString());
					}.bind(this)
				});
			}
		},
		getInitialState:function(){

			var timestamp = Math.round(new XDate(new XDate().addDays(-20).toString("yyyy-MM-dd") + " 00:00:00").getTime() / 1000);
            var sql = "SELECT FROM_UNIXTIME(ctime, '%Y-%m-%d') as name,\
                        count(*) as value\
                        FROM qeeniao.user\
                        where ctime>= "+timestamp+"\
                        group by name\
                        order by name ASC";

			return {
				data:[],
				date:'',
                all_data:[],
                'ajax_data':{'sql':sql,'access_token':token}
			};
		},
		render:function(){
            var diagram;
            if(this.state.data.length > 0){
                diagram = this.state.data.map(function(item){
                    return (
                        React.createElement(DayRegisterColumnDiagram, {className: "", yName: "注册量", yUnit: "（次/小时）", id: "day_register", id_name: "day_register", title: "每日新增注册用户", url: "", data: item})

                    );
                });
            }else{
                diagram = React.createElement(RegisterAreaBasic, {className: "", id: "UserAreaDiagram", id_name: "UserAreaDiagram", y: "注册量", title: "用户注册量", ajax_data: this.state.ajax_data, url: this.props.url, interval: "300000"});

            }

			return (
				React.createElement("div", {className: "col-xs-6"}, 
					React.createElement("div", {className: "row bgwhite"}, 
						React.createElement("div", {className: "col-xs-3 bs-callout bs-callout-info"}, 
						
							React.createElement("h4", null, this.props.title, ":")
						), 
						React.createElement("div", {className: "col-xs-3 "}, 
							React.createElement(SelectOptionDate, {handleDateChange: this.handleDateChange, data: this.props.data})
						), 
						React.createElement("div", {className: "col-xs-3", style: {margin:'4px 0'}}, 
                            React.createElement("button", {onClick: this.createHandle, className: "btn btn-primary btn", "data-toggle": "modal", "data-target": "#DayRegisterTimeBucket"}, "更多")
                        ), 
                        React.createElement(DayRegisterTimeBucket, {id: "DayRegisterTimeBucket", url: this.props.url})
					), 
					React.createElement("div", {className: "row"}, 
					diagram
					)
				
				)
			);
		}
	});
});